<template>
  <div class="userInfo">
    <!-- <p>userInfo页</p> -->
    <van-nav-bar
     fixed title="个人信息"
     right-text="保存"
     left-arrow
     @click-left="$router.go(-1)"
     @click-right="onClickSave"
    />
    <van-cell-group inset>
      <van-cell title="头像" >
        <van-uploader
          v-model="fileList"
          preview-size="60"
          max-count="1"
          :after-read="afterRead"
        />
      </van-cell>

      <!-- 输入手机号，调起手机号键盘 -->
      <van-field v-model="mobile" type="tel" label="手机号" maxlength=11 :error="phoneIsRed" :error-message="phoneErrMsg"/>
      <!-- 输入密码 -->
      <van-field
        label-class="phone-input"
        v-model="password"
        right-icon="eye"
        :type="!passwordStatus?'password':'text'"
        name="密码"
        label="密码"
        @click-right-icon="passwordStatus=!passwordStatus"
        placeholder="请输入密码"
      />
    </van-cell-group>

  </div>
</template>

<script>
import { getUserInfoDetail2, loadFiles, postUserInfo } from '@/api/user.js'
// import isConcatSpreadable from 'core-js/library/fn/symbol/is-concat-spreadable'
export default {
  name: 'UserInfo',
  data () {
    return {
      mobile: '',
      picUrl: '',
      // sex: '0',
      // birthday: '',
      password: '',

      passwordStatus: false,

      // showTel: false
      phoneErrMsg: '',
      phoneIsRed: false,

      dataImg: new FormData(),
      fileList: [
        // {
        //   url: 'https://img.yzcdn.cn/vant/leaf.jpg',
        //   name: '图片1',
        //   deletable: true
        // }
      ]
    }
  },
  created () {
    this.getUserInfo()
  },
  methods: {
    /**
     * 请求后端拿到回显数据
     */
    async getUserInfo () {
      const { data } = await getUserInfoDetail2() // 请求后端接口
      this.mobile = data.mobile
      this.picUrl = data.avatar_url // 回显
      this.password = data.pwd
      this.fileList.push({
        url: data.avatar_url,
        name: '头像',
        deletable: true
      })
    },

    /**
     * 点击保存
     */
    onClickSave () {
      // 请求后端接口
      postUserInfo(this.mobile, this.picUrl, this.password).then(res => {
        if (res.status == 200) { // 200
          this.$toast.success('修改成功！')
          this.$router.replace('/user')
        } else {
          this.$toast('一些问题发生')
        }
      })
    },

    /**
     * 图像上传的回调函数

     * @param {Object} file
     */
    afterRead (file) {
      console.log("文件：")
      console.log(file);
      // 此时可以自行将文件上传至服务器
      if (file.length > 1) {
        for (const item of file) {
          // console.log(item);
          // this.dataImg.append(file.file.name, file);
          this.dataImg.append("image", item);
        }
      } else {
        // this.dataImg.append("files", file);
        // this.dataImg.append(file.file.name, file);
        this.dataImg.append("image", file.file);
      }
      // console.log(this.dataImg);
      this.upload();
      
    },

/**
 * 图像传后端
 */
async upload() {
  // 上传图片的后端接口
  await loadFiles(this.dataImg).then(res => {
    // 拿到后端返回的图片链接
    this.picUrl = res.data
  });
}
  }
}
</script>

<style>
.userInfo {
  min-height: 100vh;
  background-color: #f7f8fa;
  /* padding-bottom: 50px; */
  padding-top: 70px;
}
</style>
